<template>
    <div>
        <div class="search">
            <span class='showTitle'><i class="el-icon-information"></i> {{rewardClass}}</span>
            <div class='selectOption'>
                <el-cascader expand-trigger="hover" :options="options" v-model="selectedOptions" @change="handleChange" placeholder='请选择奖励类型' clearable></el-cascader>
                <el-button type="success" class='checkBtn' @click="openNewSet()">新建奖励</el-button>
            </div>
        </div>
        <div class="main">
            <ul class="listTitle">
                <li v-for='item in rewardOptions'>{{item.value}}</li>
            </ul>
            <ul class='dataList' v-for='(item,index) in rewardName'>
                <li>{{item.label}}</li>
                <li>{{item.number}}</li>
                <li>
                    <el-button type="info" @click='openEidt(index)'>{{item.option1}}</el-button>
                    <el-button type="danger" @click='delet(index)'>{{item.option2}}</el-button>
                </li>
            </ul>
        </div>
        <div class="layer" v-show='layer'></div>
        <el-dialog v-model="dialogVisible" size="tiny">
            <p>{{dialogTitle}}</p>
            <template>
                          <el-select v-model="selectValue" placeholder="请选择奖励类别" @change='valueChange'>
                                    <el-option  v-for="item in rewardType":label="item.label" :value="item.value"></el-option>
                          </el-select>
</template>
<el-input v-model="rewardNumber" placeholder="请输入奖励数量" class='inputNumber' :disabled='inputIsdisabled'></el-input>
<span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="doEdit">确 定</el-button>
            <el-button @click="cancelEdit">取 消</el-button>
  </span>
</el-dialog>
</div>
</template>
<script>
    import {
        mapActions,
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                options: [],
                selectedOptions: [],
                mainData: [],
                rewardOptions: this.$store.state.systemReward.rewardOptions,
                rewardType: this.$store.state.systemReward.rewardType,
                rewardName: [],
                rewardClass: '邀请人奖励',
                dialogTitle: '新建奖励',
                selectValue: '',
                rewardNumber: '',
                layer: false,
                dialogVisible: false,
                inputIsdisabled: false,
                setRewardType: '',
                dialogType: '',
                dicName: '',
                eidtRewardIndex: '',
                editRecord: []
            };
        },
        methods: {
            // 获取奖励列表
            getRewardList(first, second) {
                let list = {
                    token: sessionStorage.token
                }
                this.$store.commit('showLoading');
                this.getReward(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    let rewardList = this.mainData = data.data;
                    let reward = [];
                    if (data.code === 200) {
                        for (let i = 0; i < rewardList.length; i++) {
                            reward.push({
                                'value': i + 1,
                                'label': rewardList[i].dicName,
                                'children': []
                            })
                            for (let j = 0; j < rewardList[i].childrenList.length; j++) {
                                reward[i].children.push({
                                    'value': j + 1,
                                    'label': rewardList[i].childrenList[j].dicName,
                                    'id': rewardList[i].childrenList[j].id
                                })
                            }
                        }
                        this.options = reward;
                    } else {
                        this.$message(data.message);
                    }
                    this.handleChange([first, second]);
                }).catch(msg => console.log(msg));
            },
            handleChange(value) {
                if(value == ''||value == undefined||value == null){
                    return;
                }
                this.editRecord = value;
                let first = value[0],
                    second = value[1],
                    obj = this.mainData[first - 1].childrenList[second - 1].childrenList;
                this.rewardName = [];
                this.rewardClass = this.options[first - 1].children[second - 1].label;
                if (obj != null) {
                    for (let i = 0; i < obj.length; i++) {
                        this.rewardName.push({
                            label: obj[i].dicName,
                            number: obj[i].amount,
                            id: obj[i].id,
                            option1: '编辑',
                            option2: '删除'
                        })
                    }
                } else {
                    return
                }
            },
            doEdit() {
                // 新建奖励
                if (this.dialogType == 1) {
                    this.newSetReward();
                }
                // 编辑奖励
                else if (this.dialogType == 2) {
                    this.doEditReward();
                }
            },
            cancelEdit() {
                this.dialogVisible = false;
            },
            // 新建奖励
            newSetReward() {
                let first = this.editRecord[0],
                    second = this.editRecord[1],
                    option = this.options[first - 1].children[second - 1],
                    list = {
                        token: sessionStorage.token,
                        dicName: this.dicName,
                        dicType: this.setRewardType,
                        parentId: option.id
                    };
                if (this.rewardNumber != '') {
                    list.amount = Number(this.rewardNumber);
                }
                this.setNewReward(list).then((data) => {
                    if (data.code === 200) {
                        this.getRewardList(first, second);
                        this.$message.success('新建成功!');
                    } else {
                        this.$message(data.message);
                    }
                    this.dialogVisible = false;
                }).catch(msg => console.log(msg));
            },
            // 编辑奖励
            doEditReward() {
                let first = this.editRecord[0],
                    second = this.editRecord[1],
                    list = {
                        token: sessionStorage.token,
                        Id: this.rewardName[this.eidtRewardIndex].id,
                        dicName: this.dicName,
                        dicType: this.setRewardType,
                    };
                if (this.rewardNumber != '') {
                    list.amount = Number(this.rewardNumber);
                }
                this.editReward(list).then((data) => {
                    if (data.code === 200) {
                        this.getRewardList(first, second);
                        this.$message.success('编辑成功!');
                    } else {
                        this.$message(data.message);
                    }
                    this.dialogVisible = false;
                }).catch(msg => console.log(msg));
            },
            // 删除奖励
            deletReward(i) {
                let first = this.editRecord[0],
                    second = this.editRecord[1],
                    id = this.rewardName[i].id
                this.deleteReward(id).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('删除成功!');
                        this.getRewardList(first, second);
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            delet(i) {
                this.$confirm('此操作将删除该奖励, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deletReward(i);
                }).catch(() => {
                });
            },
            openNewSet() {
                this.dialogTitle = '新建奖励';
                this.dialogVisible = true;
                this.dialogType = 1;
                this.selectValue = this.rewardNumber = '';
            },
            openEidt(i) {
                this.dialogTitle = '编辑奖励';
                this.dialogVisible = true;
                this.eidtRewardIndex = i;
                this.dialogType = 2;
                if (this.rewardName[i].label == '双倍收益' || this.rewardName[i].label == '双倍奖励') {
                    this.inputIsdisabled = true;
                    this.rewardNumber = '';
                }
            },
            valueChange(val) {
                if (val != '') {
                    this.dicName = this.rewardType[val - 1].label;
                    this.setRewardType = val;
                    if (val == 3 || val == 4) {
                        this.rewardNumber = '';
                        this.inputIsdisabled = true;
                    } else {
                        this.inputIsdisabled = false;
                    }
                }
            },
            ...mapActions(['getReward', 'setNewReward', 'deleteReward', 'editReward'])
        },
        watch: {},
        created: function() {
            this.getRewardList(1, 1);
        }
    }
</script>


<style scoped>
    .showTitle{
        display:block;
        float:left;
        margin-left:20px;
        height:38px;
        line-height:38px;
    }
    p {
        color: rgb(109, 148, 189);
        text-align: left;
        font-size: 18px;
    }
    ul,
    h1 {
        margin: 0;
    }
    .listTitle li:nth-child(1),.dataList li:nth-child(1) {
        width: 40%;
    }
    .listTitle li:nth-child(2),.dataList li:nth-child(2) {
        width: 20%;
    }
    .listTitle li:nth-child(3),.dataList li:nth-child(3) {
        width: 40%;
        border-right:none;
    }
    .el-select {
        width: 100%;
        margin-bottom: 20px;
    }
    .inputNumber {
        width: 100%;
    }
    .search {
        width: 100%;
        padding: 6px 20px 0 0;
        background-color: #efefef;
        height: 48px;
        margin-bottom: 10px
    }
    .selectOption {
        float: right;
        text-align: right;
    }
    .checkBtn {
        width: 96px;
    }
</style>
